<template>
  <div>
    <div
        style="margin:30px auto;width: 1200px;min-height:900px;display: flex;flex-direction: column;background-color: white">
      <el-tabs v-model="activeName" @tab-click="handleClick" style="margin: 10px 20px;">
        <el-tab-pane label="创建课程" name="first">
          <el-form :model="course" :rules="rules" ref="courseForm" label-position=left label-width="90px"
                   style="width: 460px;margin-left: 30px">
            <el-form-item label="封面" prop="cover">
              <el-upload
                  class="avatar-uploader"
                  action="http://localhost:8089/uploadFile"
                  :show-file-list="false"
                  :on-success="afterFileUpload"
              >
                <img v-if='course.cover!=null' :src='`http://localhost:8089/upload/${course.cover}`'
                     class="cover"/>
                <div v-else style="height: 150px;width: 280px;border: 2px solid #999999">
                  <div class="el-icon-picture-outline"
                       style="margin-top: 45px;font-size: 48px;text-align: center;"></div>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="课程名" prop="courseName">
              <el-input v-model="course.courseName" placeholder="给课程起个名字"></el-input>
            </el-form-item>
            <el-form-item label="所属组织" prop="schoolId">
              <el-select v-model="course.schoolId" placeholder="请选择所属组织">
                <el-option v-for="(item,index) in schoolList" :key="item.schoolId" :label="item.schoolName"
                           :value="item.schoolId"></el-option>
              </el-select>
            </el-form-item>
            <div style="display: flex;">
              <el-form-item label="课程类型" prop="fathertypeId" style="width: 65%">
                <el-select v-model="course.fathertypeId" placeholder="请选择课程大类">
                  <el-option @click.native="onClickFatherType" v-for="(item,index) in fathertypeList"
                             :key="item.fathertypeId" :label="item.fathertypeName" :value="item.fathertypeId"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="coursetypeId" style="width: 50%;margin: 0" label-width="20px">
                <el-select v-model="course.coursetypeId" placeholder="请选择课程类型">
                  <el-option v-for="(item,index) in coursetypeList" v-if="item.fathertypeId===course.fathertypeId"
                             :key="item.coursetypeId" :label="item.coursetypeName" :value="item.coursetypeId"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <el-form-item label="简介" prop="synopsis">
              <el-input type="textarea" :autosize="{ minRows: 7}" placeholder="介绍一下这门课吧"
                        v-model="course.synopsis"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="createCourse" style="float: right">创 建</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "AddCourseView",
  data() {
    return {
      chapterId:'',
      course: {cover: null,schoolId:'',fathertypeId:'',coursetypeId:''},
      activeName: 'first',
      schoolList: [],
      fathertypeId:'',
      fathertypeList:[],
      coursetypeList:[],
      rules: {
        cover:{required: true, message: '请上传课程封面', trigger: 'blur'},
        courseName:{required: true, message: '课程名不能为空', trigger: 'blur'},
        schoolId:{required: true, message: '所属组织不能为空', trigger: 'blur'},
        fathertypeId:{required: true, message: '课程大类不能为空', trigger: 'blur'},
        coursetypeId:{required: true, message: '课程类型不能为空', trigger: 'blur'},
      },
    }
  },
  methods: {
    getFatherTypeAll(){
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/fathertype/findAll`
      }).then(res => {
        this.fathertypeList = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    getCourseTypeByFatherTypeId(fathertypeId){
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/coursetype/selectCoursetypeByFathertypeId/${fathertypeId}`
      }).then(res => {
        this.coursetypeList = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    createCourse(){
      this.$refs.courseForm.validate((valid) => {
        if (valid) {
          this.course.userId=localStorage.getItem('userId');
          this.$axios({
            method: 'post',
            url: `http://localhost:8089/course/createCourse`,
            data:this.course
          }).then(res => {
            if(res.data.code===200){
              this.$message.success("创建课程成功");
              this.$router.go(0);
            }
            else {
              this.$message.error("创建课程失败");
            }
          }).catch(err => console.log(err));
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //文件上传前
    beforeAvatarUpload(file) {
      const isImage = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/webp';
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isImage) {
        this.$message.error('上传图片只能是JPG、png、Webp格式！');
      }
      if (!isLt10M) {
        this.$message.error('上传图片大小不能超过10MB!');
      }
      return isImage && isLt10M;
    },
    //文件上传之后
    afterFileUpload(response, file) {
      console.log(response);
      this.course.cover = response.dataobject;
    },
    getSchoolAll() {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/school/findAll`
      }).then(res => {
        this.schoolList = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    onClickFatherType(){
      this.getCourseTypeByFatherTypeId(this.course.fathertypeId);
    }
  },
  created() {
    this.getSchoolAll();
    this.getFatherTypeAll();
  }
}
</script>

<style scoped>
/deep/ .el-tabs__item {
  font-size: 16px !important;
  color: #333333 !important;
  margin-bottom: 5px !important;
}

.radio-group {
  display: flex;
}

.radio-item {
  width: 25%;
}

.cover {
  height: 150px;
}
</style>